<template>
    <my-ref :id="id" url="/info/product/find"
            v-model="my_value"
            ref="list" name="product" @loaded="dataLoaded" @change="changed"
            :multi="multi" :readOnly="false">
        <el-table-column prop="name" label="名称"></el-table-column>
        <el-table-column prop="guidePrice" label="售价"></el-table-column>
        <el-table-column prop="category.name" label="所属分类"></el-table-column>
    </my-ref>
</template>
<script>
    export default {
        name: "ref-product",
        props: {
            id: {type: [Object, String, Number], default: ""},
            multi:{type:Boolean ,default:false},
            value: {
                type: [Object, Array], default: function () {
                    return []
                }
            }
        },
        data() {
            return {
                my_value: {}
            }
        },
        computed: {},
        watch: {
            value: {
                deep: true,
                handler(val) {
                    if (jv.refDataEquals(val, this.my_value)) return;

                    if (val instanceof Array) {
                        this.my_value = val.map(it => Object.assign({}, it));
                    } else if (val.id) {
                        this.my_value = Object.assign({}, val);
                    } else {
                        this.my_value = [];
                    }
                }
            },
            my_value(val) {
                this.$emit("input", val);
            }
        },
        methods: {
            dataLoaded(){

            },
            changed(changed, id) {
                this.$emit("change", changed, id);
            }
        }
    }
</script>
<style scoped>

</style>
